<template>
  <div class="login">
    <div class="close">
      <van-icon name="cross" @click="goBack" />
    </div>
    <div class="logo">
      <van-image
        width="1.5rem"
        height="1.5rem"
        src="./imgs/logo.png"
      ></van-image>
    </div>
    <div class="logoForm">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-if="isAccount"
            v-model="account"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-if="!isAccount"
            v-model="mobile"
            name="手机"
            label="手机"
            placeholder="手机"
            :rules="mobileRules"
          />
          <van-field
            v-if="isAccount"
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />

          <van-field
            v-else
            v-model="sms"
            type="text"
            name="sms"
            label="验证码"
            placeholder="验证码"
            :rules="smsRules"
          >
          </van-field>
          <van-button
            v-if="!isAccount"
            :disabled="disabled"
            native-type="button"
            class="sms"
            type="info"
            size="mini"
            @click="sendSms"
            >{{ disabled ? num + "s" : "发送验证码" }}</van-button
          >
        </van-cell-group>

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>

      <span class="tips" @click="isAccount = !isAccount">{{
        isAccount ? "切换 手机验证码登录" : "切换 账号密码登录"
      }}</span>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/index";
import { Toast } from "vant";
export default {
  data() {
    return {
      mobile: "",
      account: "",
      password: "",
      sms: "",
      isAccount: true,
      disabled: false,
      num: 10,
      smsRules: [
        {
          required: true,
          message: "请填写验证码",
        },
        {
          pattern: /\d{4}/,
          message: "请输入4个字符的验证码",
        },
        {
          validator: async (value) => {
            Toast.loading("验证中...");
            var ajax = function (options) {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  if (options.code == "1234") {
                    resolve({ result: "验证码验证成功！", msg: "ok" });
                  } else {
                    resolve({ result: "验证码验证失败！", msg: "fail" });
                  }
                }, 1000);
              });
            };

            let result = await ajax({ code: value });
            Toast.clear();
            if (result.msg == "ok") {
              return true;
            } else {
              return false;
            }
          },
          message: "请输入正确的手机验证码",
        },
      ],
      mobileRules: [
        {
          required: true,
          message: "请填写手机",
        },
        {
          validator: (value) => {
            return value.length === 11;
          },
          message: "请输入11位的手机号码",
        },
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    async onSubmit() {
      let result = await this.$store.dispatch("login", {
        account: this.account,
        password: this.password,
      });
      //   根据登录的结果跳转页面
      if (result.msg === "操作成功") {
        this.$router.back();
      }
    },
    async sendSms(e) {
      this.disabled = true;

      let result = await api.getCode({ mobile: this.mobile });
      Toast.success(result.msg);
      let timeid = setInterval(() => {
        this.num--;
      }, 1000);
      setTimeout(() => {
        this.disabled = false;
        clearInterval(timeid);
      }, 10000);
      //   console.log(result);
    },
  },
};
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(245, 245, 245);
  .close {
    padding: 0.2rem;
  }
  .logo {
    margin: 2rem auto;
    width: 1.5rem;
  }
  .sms {
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    width: 2rem;
    height: 0.7rem;
  }
  .tips {
    font-size: 0.3rem;
    color: #999;
    padding: 0 0.5rem;
    display: block;
    text-align: right;
  }
}
</style>
